<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     span{
        position:absolute;
        left:0;
        top:200px;
        width:200px;
        height:200px;
        background-color:green;
    }
</style>
<body>
    <button>点击开始动画</button>
    <span></span>
    <script>
        //缓动动画原理
        //缓动动画就是让元素运动速度有所变化，让速度慢慢的慢下来
        //核心思路：
        //1、让盒子每次移动的距离慢慢变小，速度就会慢慢下来
        //2、核心算法：（目标值 - 现在的位置）/10  来作为每次移动的步长
        //3、停止条件是：让当前盒子位置等于目标位置就停止定时器

        function animation(obj, target) {  //obj是目标对象  target是目标位置
            clearInterval(obj.timer) //清除之前的定时器，只保留一个定时器
            obj.timer = setInterval(function () {
                //1、把步长值写道定时器中
                var step = Math.ceil((target - obj.offsetLeft) / 10  )//向上取整

                //加个判断条件，让它停下来
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer)
                } else {
                    //2、每次加1  这个步长值改为一个慢慢变小的值
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
            }, 30)
        }
        var btn = document.querySelector('button');
        var span = document.querySelector('span')
        btn.addEventListener('click',function(){
            animation(span,800)
        })
    </script>
</body>
</html>